React Aria

sandbox環境

ガイド

スタイル

上書きできる

データ属性が適用されており、振る舞いに応じたCSSが適用できる

Render props

code:ts

<ListBoxItem

className={({ isSelected }) => isSelected ? 'selected' : 'unselected'}

Item

</ListBoxItem>

こんな感じで状態に応じたclassを渡せる

slot

一部のコンポーネントでは同じコンポーネント

TailWindCSSの場合

tailwindcss-react-aria-componentsプラグインで記述名を短く書けるみたい

フォーム

コレクション

レイアウトだったり動的なコンポーネントなどを提供している

リストをレンダリングするときにkeyとitemを使うからパフォーマンスがあまり良くない

code:ts

// good code

{name: 'Aardvark'},

{name: 'Kangaroo'},

{name: 'Snake'}

]);

<ListBox items={animals}>

{item => <ListBoxItem id={item.name}>{item.name}</ListBoxItem>}

</ListBox>

// bad code

{name: 'Aardvark'},

{name: 'Kangaroo'},

{name: 'Snake'}

]);

<ListBox>

{animals.map(item =>

<ListBoxItem key={item.name} id={item.name}>{item.name}</ListBoxItem>

)}

</ListBox>

仮想スクロールのコレクションやfetchするためのコレクションもある

これ強い

Selection

単一な選択も動的な選択もサポートしている

そして⌘ Cmdで全選択も対応している

クライアントでルーティングする場合は、プロバイダーが提供されているのでそれで可能

コンポーネント

めちゃくちゃ参考になるやつ